<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas的相关学习</title>
    <style>
        /* #canvasElem {
            border: 1px solid #000;
        } */
    </style>
</head>
<body>
    <canvas 
    width="100"
    height="100"
    id="canvasElem"></canvas>
    <script>
        /**
         * canvas的width和height属性可以设置canvas的宽高，如果不设置，默认为300*150；  
         * 不要用 CSS 控制它的宽和高,会走出图片拉伸
         *  重新设置 canvas 标签的宽高属性会让画布擦除所有的内容。
         * 1. canvas是一个矩形区域，可以通过js来绘制图形
         * moveTo(x, y)：设置上下文绘制路径的起点
         * lineTo(x, y)：绘制一条从当前点到指定x, y点的直线
         * stroke()：根据路径绘制线条，真正绘制线条必须执行stroke()方法
         * beginPath()：新建一条路径，路径一旦绘制完成，通过fill()方法填充路径，通过stroke()方法绘制路径
         * closePath()：闭合路径 就是将起点和终点链接起来
         *  beginPath()和closePath()是成对出现的，如果没有closePath()，路径会自动闭合;使用场景：绘制多个图形时，可以使用beginPath()新建路径，绘制完一个图形后，使用closePath()闭合路径，然后绘制下一个图形;
        */
        const canvasId = document.getElementById('canvasElem');
        const ctx = canvasId.getContext('2d');
        
        // 开始新的路径
        ctx.beginPath();
        // 绘制三角形
        ctx.moveTo(0,0); // 移动到起始点
        ctx.lineTo(100, 0)
        ctx.lineTo(50, 50)
        ctx.closePath(); // 闭合路径

        ctx.stroke(); // 描边路径
    </script>
</body>
</html>